// global transition css

/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s ease;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.3s ease;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all 0.3s ease;
}

.breadcrumb-leave-active {
  position: absolute;
}

/* card flip effect */
.card-flip-enter-active,
.card-flip-leave-active {
  transition: all 0.6s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.card-flip-enter {
  transform: rotateY(-180deg);
}

.card-flip-leave-to {
  transform: rotateY(180deg);
}

/* skeleton loading animation */
@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.skeleton-loading {
  background: linear-gradient(90deg, rgba(238, 238, 238, 0.6) 25%, rgba(238, 238, 238, 0.9) 50%, rgba(238, 238, 238, 0.6) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite ease;
}

/* ripple effect for buttons */
@keyframes ripple {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple 0.6s ease;
}
